﻿<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.tooltip.js"></script>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',title:'演示说明',border:false" style="padding:15px;height:70px;">
        列“地区”、“测试2”，设置了 tooltip 效果，可以把鼠标移动到该列的单元格中查看扩展效果。
        <br />
        <br />
    </div>
    <div data-options="region:'center',border:false" style="border-top-width:1px;">
        <table id="tg1"></table>
    </div>
</div>

<script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({
                field: 'AreaName', title: '地区', width: 150,
                formatter: function (val, row) {
                    return "<b>" + val + "</b>";
                },
                tooltip: function (val, row) {
                    return "<b>" + val + "测试</b>";
                }
            });
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60, tooltip: true }
            ];
            result.push(normal);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            treeField: "AreaName",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/treegrid/treegrid-common-data.json",
            rowTooltip: false
        };

        $("#tg1").treegrid(options);
    });
</script>